
// 定义一个高阶组件组件函数 hoc
// 作用: 用来处理旧组件, 输出新组件
// 语法:
// 01: 定义一个函数, 函数的参数接收一个组件,该组件就是要处理的组件
// 02: 该函数有返回值, 返回值为一个类组件或函数组件,
// 03: 将传入的组件放在该函数返回的组件中,相当于给传递的参数组件套了一层组件
// 04: 将该函数导出去,方便使用

// 注意: 当 hoc处理的组件是接收父组件中的数据时, 此时需要在hoc 组件中进行属性的传递,
// 否则被hoc 处理的组件由于结构变成了非父子关系,导致属性丢失;

import { Component, Fragment } from "react";
import './hoc.css';
const hoc = (Com) => {
    return class Newcom extends Component {
        render() {
            console.log('this-Newcom', this);
            return <div className="hoc">
                {/* 使用传入的组件Com */}
                {/* 使用  {...this.props} 将数据传递给子组件*/}
                <Com {...this.props}></Com>
                <p>千锋教育@copyright</p>
            </div>
        }
    }
}
export default hoc
